import Vue from 'vue'
import Vuex from 'vuex'
import {getRequest} from "@/util/api";
import '../util/stomp'
import '../util/sockjs'
import { Notification } from 'element-ui';

Vue.use(Vuex)

const now = new Date();

const store =  new Vuex.Store({
        //Vex中存放的数据列表
        state: {
            /**
             * sessions 的格式是“xxx#xxx” （张三#李四） 来体现张三和李四的聊天记录
             */
            sessions:{},
            currentSession: null,
            currentHr: JSON.parse(window.sessionStorage.getItem("user")),
            filterKey:'',
            //前端访问的路由数组
            routes:[],
            hrs:[],//加载hr的聊天列表
            stomp:null,
            isDot:[]//所有属性 （判断这个用户有没有消息没读，红点功能）
        },
        mutations:{
            /**
             * 初始化路由数据
             * @param state
             * @param data
             */
            initRoutes(state,data){
                //data为后台传入的参数
                state.routes = data;
            },
            /**
             * 切换你要聊天的对象
             * @param state
             * @param currentSession
             */
            changeCurrentSession (state,currentSession) {
                state.currentSession = currentSession;
                Vue.set(state.isDot,state.currentHr.username + "#"+ currentSession.username ,false)
            },
            /**
             * 存放聊天记录的方法
             * @param state VueX的状态封装类
             * @param msg 客户端发送的JSON类型的msg对象
             */
            addMessage (state,msg) {
                console.log(state.sessions);
                let message = state.sessions[state.currentHr.username+"#"+msg.to];
                if(!message){
                    //这里使用了Vue的set方法，一位内这些值我们没有在state中定义，所以无法动态动态绑定，
                    //所以我们使用VueX的Set方法来给他创建出来。
                    //state.sessions[state.currentHr.username+"#"+msg.to] = []
                    Vue.set(state.sessions,state.currentHr.username+"#"+msg.to,[])
                }
                message = state.sessions[state.currentHr.username+"#"+msg.to].push({
                    content:msg.content,
                    date: new Date(),
                    self:!msg.notSelf //判断是否是自己
                })
            },
            /**
             * 加载聊天人员列表
             * @param state
             * @param data
             * @constructor
             */
            INIT_HR(state,data){
                state.hrs = data;
            },
            /**
             * 初始化当前hr的方法，如果
             * @param state
             * @param hr
             * @constructor
             */
            INIT_CURRENTHR(state,hr){
                state.currentHr = hr;
            },
            /**
             * 浏览器的历史聊天记录可以再这里完成（把对应的聊天记录存到localStorage中去）
             * @param state
             * @constructor
             */
            INIT_DATA (state) {
                let data = localStorage.getItem('vue-chat-session');
                //console.log(data)
                if (data) {
                    state.sessions = JSON.parse(data);
                }
            }
        },
        //如果有异步操作那么就使用actions 中的方法
        actions: {
            //去做webSocket连接
            connect(context){
                let _this = this;
                //1、创建链接(stomp)
                context.state.stomp = Stomp.over(new SockJS("/ws/ep"));
                //2、发起链接(s)/ws/chat
                context.state.stomp.connect({},success => {//成功方法：
                    //接受消息[监听的地址]（订阅服务端消息[后端我们定义好的那个URL]“注意这里加了一个/user”）
                    //“这个/user”是默认给我们加上的，不能删掉
                    //后面这个方法为接收成功消息的回调方法,消息内容话只能在返回数据中的“body”来拿到
                    context.state.stomp.subscribe('/user/queue/chat',msg => {
                        /**
                         * 以下是消息接受逻辑处理
                         * 1、从stomp中获取到发送的消息
                         * 2、获取服务端发出的数据，并且进行数据处理
                         * */
                        //console.log(msg);//这个是接收到的消息的msg
                        //console.log("我是服务端发送的数据"+msg.body);//接收到到消息的对象
                        let receiveMsg = JSON.parse(msg.body);//解析后的JSON数据
                        if(!context.state.currentSession || receiveMsg.form != context.state.currentSession.username){
                            //弹框
                            Notification.info({
                                title: '您有来自['+receiveMsg.fromNickName+']的一条消息',
                                message: receiveMsg.content.length>10 ? receiveMsg.content.substr(0,10)+"...":receiveMsg.content ,
                                position: 'bottom-right'
                            })
                        }
                        //设置IsDot的的信息

                        Vue.set(context.state.isDot,context.state.currentHr.username + "#"+ receiveMsg.form ,true)
                        receiveMsg.notSelf = true;//我作为接收端的话，那么肯定不是我自己，所以为true
                        receiveMsg.to = receiveMsg.form;//当前的to 改成 要发送的人
                        context.commit("addMessage",receiveMsg);//提交消息
                    })
                },error => {//失败方法：4
                    //这里可以做一个连接失败的提示
                })
            },
            //异步加载左边的聊天人员菜单
            initData(context) {
                //去请求加载聊天列表（"‘）
                context.commit('INIT_DATA')
                getRequest("/chat/hrs").then(resp => {
                    if(resp){
                        console.log(resp)
                        //如果请求到数据了，就去初始化数据 提交到Vuex中使用
                        context.commit('INIT_HR',resp)
                    }
                })
            }
        }
})
/**
 * 这里是store的监听只要store中的值发生了变化，就回去把这个值放到localStorage中去
 */
store.watch(function (state) {
    return state.sessions
},function (val) {
    console.log('CHANGE: ', val);
    localStorage.setItem('vue-chat-session', JSON.stringify(val));
},{
    deep:true/*这个貌似是开启watch监测的判断,官方说明也比较模糊*/
})


export default store;//导出store
